
<template>
<table  border="1px">
  <tr>
    <th>照片</th>
    <th><img  :src="resume.photo.src" :width="resume.photo.width" /></th>
  </tr>
  <tr>
    <th>姓名</th>
    <th>{{resume.name}}</th>
  </tr>
  <tr>
    <th>年龄</th>
    <th>{{resume.age}}</th>
  </tr>
  <tr>
    <th>好友</th>
    <th>
      <ul>
<!--        <li v-for=" index in resume.friend.length">{{resume.friend[index-1]}}</li>-->
        <li v-for=" (item,index) in resume.friend">{{item}}</li>
      </ul>
    </th>
  </tr>
</table>
  <button @click="add" >{{change}}</button>

</template>

<script setup>
import {ref} from "vue";
let count = 0;
const resume = ref({photo:{},
  friend:[]
});
const change = ref('一键导入信息');
const  add=()=>{
  if (count++%2===0) {
    resume.value.photo.src = 'img.png';
    resume.value.photo.width='100px';
    resume.value.name = '传奇哥';
    resume.value.age = '18';
    resume.value.friend = ['路飞', '索隆', '娜美', '牛马', '牛魔'];
    change.value='一键删除信息';
  }else {
     resume.value = {
       photo:{},
      friend:[]
    };
    change.value='一键导入信息';
  }
}
</script>
<style scoped>

</style>